<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>车辆故障详情</title>
  <!-- import CSS -->
  <link rel="shortcut icon" href="../favicon.ico">
  <link rel="stylesheet" href="../plugins/ElementUI/index-2.3.9.css">
  <link href="../css/common.css" rel="stylesheet">
  <link href="../css/bootstrap.min14ed.css" rel="stylesheet">
  <link href="../css/style.min862f.css" rel="stylesheet">
  <!-- import Vue before Element -->
  <script src="../plugins/ElementUI/vue-2.5.16.js"></script>
  <!-- import JavaScript -->
  <script src="../plugins/ElementUI/index-2.3.9.js"></script>
  <script src="../plugins/ElementUI/vue-resource.min.js"></script>
  <!-- baidu-map -->
  <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=ePOIA9rln4os58j2HQnx3AW0Sdy9MiQv"></script>
  <style>
    .BMap_cpyCtrl,.anchorBL{display: none}
    .echarts-box{margin-bottom:0}
  </style>
</head>
<body class="gray-bg echarts">
  <div id="tbb" v-cloak>
      <div class="wrapper wrapper-content">
        <div class="row">
            <div class="echarts-box">
              <div class="echarts-title">
                <div class="echarts-2-b">
                  <div class="echarts-title-content">车辆故障信息详情</div>
                </div>
              </div>
              <div class="echarts-box-content carAllInfo">
                  <div class="carAllInfo-content">
                    <div class="table" id="container">
                      <div class="thead dt-flex">
                        <span class="dt-flex__item_2">车牌号</span>
                        <span class="dt-flex__item_2">vin码</span>
                        <span class="dt-flex__item_2">故障等级</span>
                        <span class="dt-flex__item_3">上报时间</span>
                      </div>
                      <div class="tbody" id="sliderTable">
                        <div>
                          <a href="javascript:;" class="dt-flex">
                              <span class="dt-flex__item_2">{{data.plateNo}}</span>
                              <span class="dt-flex__item_2">{{data.vin}}</span>
                              <span class="dt-flex__item_2">{{transform(data)}}</span>
                              <span class="text-navy dt-flex__item_3">{{data.uploadTime}}</span>
                          </a>
                        </div>
                      </div>
                      <div class="thead dt-flex">
                        <span class="dt-flex__item_2">故障信息</span>
                        <span class="dt-flex__item_2"></span>
                        <span class="dt-flex__item_3"></span>
                      </div>
                      <div class="faultInfo" v-show="data.hAlarmLevel">
                        <span v-for="item in items">{{item}}</span>
                      </div>
                      <div v-show="data.circleFence">	
                        <div id="Bmap"></div>
                      </div>
                    </div>
                  </div>
              </div>
            </div>
        </div>
      </div>
  </div>
  <script src="../plugins/Underscore/underscore-min.js"></script>
  <script src="../js/ApiRequest.js"></script>
  <script src="../js/mars2baidu.js"></script>
  <script>
    var map = null;
    var vm = new Vue({
      el: '#tbb',
      data:{
        appShow:true,
        data:{},
        items:{}
      },
      mounted:function(){
        this.$nextTick(function(){
          resize()
          // 页面销毁后 remove fault
          window.addEventListener('beforeunload', function(e){
            storageLocal.remove('fault')
          });
        })
      },
      methods: {
          requestModel:function(data){
            resourceRequst("/alarm/queryAlarmDetailInfo",data,function(res){
                vm.items = res.getResult
            },true)
          },
          transform:function(item){
            if(item.hAlarmLevel){return item.hAlarmLevel+'级故障'}
            if(item.circleFence && Object.keys(item.circleFence).length){return '围栏报警'}
            return "未知"
          },
          //绘制围栏图形
          handleShowFence:function(){
            if(map){map.clearOverlays()}
            var wgs84togbd09 =  coordtransform.wgs84togbd09(vm.data.fenceAlarm.lng,vm.data.fenceAlarm.lat)
            var point = new BMap.Point(wgs84togbd09[0],wgs84togbd09[1]);
            map = new BMap.Map('Bmap',{enableMapClick:false});
            map.centerAndZoom(point, 16);
            map.enableScrollWheelZoom(); 
            map.setMapStyle({style:'midnight'});
            var myIcon = new BMap.Icon("../img/ico/car.png", new BMap.Size(35,17));
            var marker = new BMap.Marker(point,{icon:myIcon});
            map.addOverlay(marker);

            setTimeout(function(){           
              var data = JSON.parse(JSON.stringify(vm.data.circleFence));
              if(data.fenceType == "circle"){
                var H = JSON.parse(data.pointList);
                var HP = coordtransform.wgs84togbd09(H.lng,H.lat)
                data.pointList = {
                  lng:HP[0],
                  lat:HP[1],
                }
              }else{
                var H = JSON.parse(data.pointList);
                data.pointList = _.map(H,function(item){
                  var HP = coordtransform.wgs84togbd09(item.lng,item.lat)
                  return new BMap.Point(HP[0], HP[1])
                })
              }
              
              var polygon = {};              
              if(data.fenceType == "circle"){//圆形
                var point = new BMap.Point(data.pointList.lng, data.pointList.lat);
                map.centerAndZoom(point,15);
                polygon = new BMap.Circle(data.pointList,data.radius, {
                    strokeColor: "#58ffff", 
                    fillColor: "#3d9dff", 
                    strokeWeight: 2, 
                    strokeOpacity: 0.5,
                    fillOpacity:0.2
                });
              }else{
                map.setViewport(data.pointList);
                polygon = new BMap.Polygon(data.pointList, {
                    strokeColor: "#58ffff", 
                    fillColor: "#3d9dff", 
                    strokeWeight: 2, 
                    strokeOpacity: 0.5,
                    fillOpacity:0.2
                });  //创建多边形
              }
              map.addOverlay(polygon);
            },500)
          },
      },
      watch:{
        data:function(item){
          if(item.circleFence && Object.keys(item.circleFence).length){
            // 围栏报警
            console.log(item)
            vm.handleShowFence()
          }else{
            // 车辆故障报警
            var data = {
              time:item.uploadTime,
              vin:item.vin
            }
            this.requestModel(data)
          }
        }
      }
    })
    window.onload = function(){//接收来自index.html的故障信息
        storageLocal.set('fault',{type:true})
        window.addEventListener("storage", function (e) {
            if(e.key == "faults"){
              vm.data = storageLocal.get('faults');
              storageLocal.remove('faults')
            }
        });
    }
    function resize(){
        var winHeight = window.innerHeight||(document.documentElement&&document.documentElement.clientHeight)||document.body.clientHeight;
        container.style.height = winHeight-78 + 'px';
        Bmap.style.height = winHeight-210 + 'px';
    }
    window.onresize = function () {//重置容器高宽
        resize();
    };
  </script>
</body>
</html>